/**
* Created by xudesong on 2019/1/14.
*/

<template>
    <div class="messageItem">
        <span class="demonstration"> Message Item  </span>
        <div>{{queryParam.item.desc}}</div>
    </div>
</template>

<script lang="ts">
    import Vue from 'vue'
    import {Inject, Provide, Prop, Model, Watch, Emit, Mixins } from 'vue-property-decorator'
    import Component from 'vue-class-component'
    @Component
    export default class MessageItem extends Vue{
        @Prop() age!:number;
        @Model("change") checked!:number;
        queryParam:any;
        created(){  //生命周期里接收参数
            this.queryParam = this.$route.query,  //接受参数关键代码
                console.log("this.$route.query:  ",this.queryParam);
        }
        goMessageItem(item:any){ /* 这里是偷懒写的any，在实际项目中需要避免 */
            console.log( "goMessageItem.: item ",item.id);
        }
    }
</script>

<style scoped lang="scss">
    .messageItem{
        width: 100%;
        height: 500px;
        background-color: gainsboro;
        .demonstration{
            color: red;
        }
    }
</style>